<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
    title: string
    visible?: boolean
  }>(),
  {
    visible: true
  }
)

const _v = ref<boolean>(props.visible)
</script>
<template>
  <div class="map-item-section">
    <div class="map-item-section-header" @click="_v = !_v">
      <div>{{ title }}</div>
      <i class="mas-icon-min" v-if="_v" />
      <i class="mas-icon-add" v-else />
    </div>
    <div v-show="_v">
      <slot />
    </div>
  </div>
</template>
<style lang="scss">
@import '@/map/style/var';
.map-item-section {
  .map-item-section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.5em 0.75em;
    background-color: rgba($color: #000000, $alpha: 0.3);
  }
}
</style>
